<template>
    <div class="wallet">
       <div class="wallet-header d-flex p-all items-c">
      <i class="iconfont icon-fangxiang1" @click="back"></i>
      <div class="f-1 d-flex jc-c f-18" >我的钱包</div>
      <i class="iconfont icon-menu2 " @click="flag = !flag">
      </i>
    </div>
    <div class="d-flex flex-column items-c jc-c" style="height:1rem">
        <p class="grey" style="font-size:0.28rem">0</p>
        <p class="f-12" >(当前可用余额<i style="border-radius:50%;background:#666;color:#fff;width:0.14rem;height:0.14rem;" @click="toast" > ? </i>)</p>
    </div>
    <div class="walletS p-all " style="border-top:0.08rem #f7f7f7 solid">
        <li>
            <span>账户余额</span><i>0元</i>
        </li>
        <li>
            <span>卡券</span><i>0张</i>
        </li>
        <li>
            <span>积分</span><i>0</i>
        </li>
    </div>
    <div class="d-flex jc-c items-c wallet-btn" @click="chong()">
        充值
    </div>
    <ti-ps v-show="flag"></ti-ps>
    </div>
</template>

<script>
import { Toast } from 'vant'
import Vue from 'vue'
Vue.use(Toast)
export default {
  data () {
    return {
      flag: false
    }
  },
  methods: {
    back () {
      this.$router.push('huiyuan')
    },
    chong () {
      this.$router.push('huiyuan')
    },
    toast () {
      Toast('为了保护用户的资金安全,请认准平台的真实信息')
    }
  }
}
</script>

<style lang="scss" scoped>

.walletS{
    li{
        display: flex;
        padding: 0.07rem 0.1rem;
        border-bottom: 1px solid #f7f7f7;
        span{
            flex:1
        }
    }
}
.wallet-btn{
    height:0.44rem;
    background:#36bc7c;
    border-radius:0.14rem;
    color:#fff;
    margin: 0 auto;
    width:3.45rem
}

</style>
